.calendar-input{
  width: 200px;
  height: 28px;
}
.charts-title{
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  color: #2e637d;
  font-size: 18px;
  padding-top: 10px;
  .title-middle {
    width: 50%;
    position: relative;
    &.all {
      width: 100%;
    }
    .center {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      font-size: 16px;
      text-align: center;
      &.left-center {
        color: #5a90dc;
      }
      &.right-center {
        color: #7ce0c3;
      }
    }
  }
}
/*拜访*/
.visit-chart-box{
  background: #FFF;
  width: 100%;
  height: 300px;
  margin-bottom: 20px;
  .visit-title{
    width: 15%;
    >table{
      width: 100%;
      height: 100px;
      margin: 80px 0 0 0;
      >tbody>tr{
        >td{
          text-align: center;
          color: #6d6d6d;
        }
      }
    }
  }
  .visit-chart-container{
    .visit-chart{
      width: 28%;
      height: 260px;
    }
  }

}
.use-chart-box{
  background: #FFF;
  border: 1px solid #e1e1e1;
  width: 100%;
  margin-bottom: 20px;
  height: 300px;
  .use-chart{
    width: 20%;
    height: 260px;
    margin: 0 0 0 5%;
    >table{
      width: 80%;
      height: 210px;
      margin: 25px 0 0 5%;
      >tbody{
        >tr{
          >td{
            height: 70px;
            text-align: center;
            color: #6d6d6d;
          }
        }
      }
    }
  }
  .use-mark{
    width: 65%;
    height: 260px;
    margin-left: 5%;
    position: relative;
  }
}

.chart-open-account{
  background: #FFF;
  border: 1px solid #e1e1e1;
  width: 100%;
  margin-bottom: 20px;
  height: 300px;
  .account-box{
    width: 48%;
    height: 260px;
    position: relative;
    .open-account{
      width: 60%;
      height: 260px;
    }
    .line-turn{
      position: absolute;
      left: 0;
      top: 0;
      opacity: 1;
      //animation: lineTurn 0.5s linear 1.2s;
      //animation-fill-mode:forwards;
    }
    .columnar{
      width: 200px;
      height: 200px;
      margin: 30px 0 0 0;
      opacity: 1;
      //animation: lineTurn 0.5s linear 1.7s;
      //animation-fill-mode:forwards;
      .columnar-img{
        width:20%;
        height: 100%;
        .col-area{
          width: 100%;
          &.col-1{
            background: #5aa3e8;
          }
          &.col-2{
            background: #75b2eb;
          }
          &.col-3{
            background: #a6cdf2;
          }
          &.col-4{
            background: #c4def7;
          }
          &.col-5{
            background: #d7e8f9;
          }
        }
      }
      .columnar-text{
        width:80%;
        height: 100%;
        .name{
          margin: 0 auto 0 5px;
          line-height: 20px;
          height: auto;
          &.text-1{
            color: #5aa3e8;
          }
          &.text-2{
            color: #75b2eb;
          }
          &.text-3{
            color: #a6cdf2;
          }
          &.text-4{
            color: #c4def7;
          }
          &.text-5{
            color: #d7e8f9;
          }
        }
      }
    }
  }
}
@keyframes lineTurn {
  to{
    opacity: 1;
  }
}

.entryAndPerfecting{
  width: 100%;
  margin-bottom: 20px;
  .entry-perfecting-box{
    background: #FFF;
    border: 1px solid #e1e1e1;
    height: 300px;
    width: 48%;
    .entry-perfecting-container{
      width: 100%;
    }
    .entry-perfecting-title{
      width: 30%;
      >table{
        width: 100%;
        height: 100px;
        margin: 80px 0 0 0;
        >tbody>tr{
          >td{
            text-align: center;
            color: #6d6d6d;
          }
        }
      }
    }
    .entry-perfecting-chart{
      width: 70%;
      height: 260px;
    }
  }
}

.currentAndAdd{
  width: 100%;
  margin-bottom: 20px;
  height: 300px;
  border: 1px solid #e1e1e1;
  background: #FFF;
  .current-add-box{
    width: 50%;
    height: 100%;
    .current-add-container {
      width: 100%;
      height: calc(100% - 40px);

    }
  }
}